import React, { Suspense } from 'react'
import { Redirect, Route, Switch } from 'react-router-dom'
import './App.scss'
import Layout from '@/pages/Layout'
import Login from '@/pages/Login'
import NotFound from '@/pages/NotFound'
import Edit from './pages/Profile/Edit'
import AuthRoute from './components/AuthRoute'
import Chat from './pages/Profile/Chat'
import Search from '@/pages/Search'
import Result from './pages/Search/Result'

// import Article from './pages/Home/Article'

// react中的路由懒加载
import { lazy } from 'react'
const Article = lazy(() => import('@/pages/Article'))

export default function App() {
  return (
    <div className="app">
      {/* App */}
      {/*<Layout></Layout>
      <Login></Login> */}

      <Suspense fallback={<div style={{ color: 'red' }}>正在加载中......</div>}>
        <Switch>
          {/* 重定向方式一:  */}
          <Route path="/" exact>
            <Redirect to="/home"></Redirect>
          </Route>

          {/* 重定向方式二: (函数式) 是用于跳转前又复杂逻辑 */}
          {/* <Route
          path="/"
          exact
          render={() => {
          if(!token) return <Redirect to="/login"></Redirect>
            return <Redirect to="/home"></Redirect>
          }}
        ></Route> */}

          <Route path="/home" component={Layout}></Route>
          <Route path="/login" component={Login}></Route>

          {/* 需求: 对个人访问信息进行登录访问控制 */}
          {/* <Route path="/profile/edit" component={Edit}></Route> */}
          {/* 封装的小要求: 我们希望AuthRoute组件使用方式和Route组件大致相同 */}
          <AuthRoute path="/profile/edit" component={Edit}></AuthRoute>
          <AuthRoute path="/chat" component={Chat}></AuthRoute>

          <Route path="/search" component={Search} exact></Route>
          <Route path="/search/result" component={Result}></Route>

          <Route path="/article/:id" component={Article}></Route>

          <Route component={NotFound}></Route>
        </Switch>
      </Suspense>
    </div>
  )
}
